<template>
  <div class="card table-search">
    <el-form ref="formRef" :model="searchFormData" label-width="auto" @submit.native.prevent>
      <Grid ref="gridRef" :collapsed="collapsed" :gap="[20, 0]" :cols="searchCol">
          <slot name="input" />
        <!-- <GridItem suffix>
          <div class="operation">
            <el-button type="primary" :icon="Search" @click="search"> 搜索 </el-button>
            <el-button :icon="Delete" @click="reset(formRef)"> 重置 </el-button>
            <el-button type="primary" link class="search-isOpen" @click="collapsed = !collapsed">
              {{ collapsed ? '展开' : '收起' }}
              <el-icon class="el-icon--right">
                <component :is="collapsed ? ArrowDown : ArrowUp"></component>
              </el-icon>
            </el-button>
          </div>
        </GridItem> -->
      </Grid>
    </el-form>
  </div>
</template>
<script setup lang="ts" name="SearchForm">
import { ref } from "vue";
import { Delete, Search, ArrowDown, ArrowUp } from "@element-plus/icons-vue";
import Grid from "@/components/Grid/index.vue";
import GridItem from "@/components/Grid/components/GridItem.vue";
// 接收搜索template
const props = defineProps({
  searchFormData: {},
  searchCol:{}
});
// form的ref
const formRef = ref()
const emit = defineEmits();
// 搜索
const search = () => {
  emit("search");
}
// 重置
const reset = (formRef) => {
  if (!formRef) return
  formRef.resetFields()
  emit("reset");
}

// 是否默认折叠搜索项
const collapsed = ref(true);

// 获取响应式断点
const gridRef = ref();
</script>
